import React, { useState, useCallback } from 'react'
import { observer, inject } from 'mobx-react'

import video from '../../store/video'
// import LiveTime from './live-time'
import PlaybackProgress from './playback-progress/playback-progress'
import VideoType from './video-type/video-type'
import PlayBtn from './play-btn'
import StopBtn from './stop-btn'
import SplitScreen from './split-options/split-options'
import ScreenshotBtn from './screen-shot-btn'
import Volume from './volume/volume'
import RecordTime from './record-time/record-time'
import MoreBtn from './more-btn'
import './toolbar.scss'
import RateOptions from './rate-options/rate-options'
import FullScreen from './full-screen/full-screen'

const Toolbar = ({ mainRef }) => {
  const { w } = video.videoSize

  const [toolbarWidth, setToolbarWidth] = useState(`${w}px`)

  const fullScreenRef = useCallback((val) => {
    setToolbarWidth(`${val}px`)
  })

  return (
    <div className="toolbar-wrapper" style={{ width: toolbarWidth }}>
      <PlaybackProgress />
      <div className="toolbar">
        <div className="toolbar-content">
          <PlayBtn />
          <StopBtn />
          {/* <LiveTime   /> */}
          <RecordTime />
        </div>
        <div className="toolbar-content">
          <MoreBtn />
          <Volume />
          <VideoType />
          <RateOptions />
          <ScreenshotBtn />
          <SplitScreen />
          <FullScreen ref={fullScreenRef} mainRef={mainRef} />
        </div>
      </div>
    </div>
  )
}

export default inject('store')(observer(Toolbar))
